<template>
    <div class="container">
        <div class="background" :style="{ backgroundImage: `url(${base}` + headpic + ')' }"></div>
        <van-sticky>
            <van-nav-bar @click-left="out()" v-show="t < 20" left-arrow style="background-color: transparent;border: none;box-shadow: none;color: #000;"/>
            <van-nav-bar @click-left="out()" v-show="t>=20" :left-text="nickname" left-arrow/>
        </van-sticky>
        <div class="divs">
            <div class="profile">
                <img :src="base+headpic" alt="">
                <p class="name">{{ nickname }}</p>
            </div>
            <div class="content">
                <div v-for="pro, i in project" :key="i">{{ pro }}</div>

            </div>
        </div>
        <div class="Introduction">
            {{ introduction }}
        </div>
        <div class="border"></div>
        <div class="qualification">
            <p>教师资质</p>
            <ul class="list" v-for="item, i in achieve" :key="i">
                <li><span></span>{{ item }} </li>

            </ul>
        </div>
        <div class="border"></div>
        <!-- <div class="qualification">
            <p>授课范围</p>
            <div class="shouke">

            </div>
        </div> -->
    </div>
</template>

<script>
import axios from '@/http'
import { base } from "@/service";

export default {
    data() {
        return {
            t: 0,
            achieve: {},
            coach_id: '',
            headpic: '',
            introduction: '',
            nickname: '',
            project: [],
            base,
        }
    },
    methods: {
        out(){
            console.log('111');
            this.$router.push('/home/team')
        },
        scroll() {
            this.t = window.scrollY
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scroll, true)
        console.log(window);
        const id = this.$route.params.id;
        console.log(id);
        axios.coachApi.listCoachById({ coach_id: id }).then(res => {
            console.log(res);
            // achieves=res.data.data[0].achieve
            this.achieve = res.data.data[0].achieve.split(',');
            console.log(this.achieve);
            this.coach_id = res.data.data[0].coach_id
            this.headpic = res.data.data[0].headpic
            this.introduction = res.data.data[0].introduction
            this.nickname = res.data.data[0].nickname
            this.project = res.data.data[0].project.split(',');
            console.log(this.project);
        })
    }

}
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__text{

color:black;

}

::v-deep .van-nav-bar .van-icon{
    color: #000;
}
[class*=van-hairline]::after{
    border: none;
}
.container {
    position: relative;
}

.divs {
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    // background-image: url("`http://119.3.190.46/cjsj_img/pic/${headpic}`");
    background-size: cover;
    z-index: -1;
}


.profile {
    display: flex;
    align-items: center;
    margin-top: 200px;
    /* 调整顶部间距 */
    padding-left: 20px;
    position: relative;

}

.profile img {
    width: 60px;
    /* 设置头像的宽度 */
    height: 60px;
    /* 设置头像的高度 */
    border-radius: 50%;
    /* 添加圆角效果 */
    margin-right: 10px;
    /* 设置头像与文本之间的间距 */
    position: absolute;
    transform: translateY(-10px);
}

.name {
    margin-left: 70px;
    margin-top: 5px;
}

.content {
    padding: 25px 5px;
    /* 调整内容区域和头像之间的间距 */
    background-color: #fff;
    display: flex;
    flex-wrap: wrap
}


.content div {
    background-color: #F7F1E1;
    margin: 5px;
    /* 设置间距为 5px */
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 14px;
    color: #85674B;
}

.Introduction {
    margin: 20px 10px;
    padding: 15px;
    font-size: 14px;
    background-color: #F7F7F7;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.border {
    border: 5px solid #F7F7F7;
    // box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin: 5px 10px;
}

.qualification {
    margin: 20px 10px;


    p {
        margin-left: 10px;
        font-weight: bold;
        margin: 10px 10px;
    }

}

.list {
    font-size: 14px;
    list-style: none;
    padding-left: 10px;
    margin-bottom: 10px;

}
.list span{
    display: inline-block;
    height: 8px;
    width: 8px;
    background-color: #85674B;
    border-radius: 50%;
    margin-right: 7px;
    }
.custom-icon {
    margin-right: 5px;
}
</style>
